<template>
  <div>
    <main>
      <div class="title">开通会员</div>
      <div class="vip-name">九炸炸 VIP会员</div>
      <!-- 开通会员表单 -->
      <el-form>
        <!-- 选择会员时长 -->
        <div class="duration">
          <div
            @click="selected(item)"
            :class="{ active_color: active === item.name }"
            v-for="(item, index) in vipList"
            :key="index"
          >
            <span class="h86">{{ item.name }}</span>
            <span class="h48"
              >¥ <span class="price">{{ item.price }}</span>
            </span>
            <span class="tips">到期不会自动续费</span>
          </div>
        </div>
        <!-- <div class="vip-name jzz_name">九炸炸作业批改</div>
        <div class="homework">
          <div
            @click="homeworkSelected(item)"
            :class="{ selected_color: homeworkActive === item.name }"
            v-for="(item, index) in homeVipList"
            :key="index"
          >
            <span class="h86">{{ item.name }}</span>
            <span class="h48"
              >¥ <span class="price">{{ item.price }}</span>
            </span>
            <span class="tips">我的作业</span>
          </div>
        </div> -->
        <!-- 选择支付方式 -->
        <div class="pay-methods">选择支付方式</div>
        <div class="methods">
          <div
            @click="paymentMethod = '0'"
            style="color: #0072ff"
            :class="{ selected_method: paymentMethod === '0' }"
          >
            <img src="@/assets/imgs/vip_slices/alipay.png" alt="" /> 支付宝支付
          </div>
          <div
            @click="paymentMethod = '1'"
            :class="{ selected_method: paymentMethod === '1' }"
            style="color: #41b035"
          >
            <img src="@/assets/imgs/vip_slices/wxpay.png" alt="" /> 微信支付
          </div>
        </div>
        <!-- 支付按钮 -->
        <el-button class="pay-btn" ref="payBtn" @click="toPay()"
          >确认支付：¥ {{ totalPrice }}</el-button
        >
      </el-form>
      <!-- 特权说明 -->
      <div class="privilege">
        <img src="@/assets/imgs/vip_slices/特权@2x.png" alt="" />
      </div>
      <!-- 支付二维码弹窗 -->
      <!-- 我的二维码是在弹框里,使用的话只需要给一个装二维码的元素就可以 -->

      <el-dialog
        v-if="orderId"
        width="20%"
        :title="'请扫码支付'"
        @close="closeCode"
        :visible.sync="innerVisible"
      >
        <div class="paycode">
          <!-- 放置二维码的容器,需要给一个ref -->
          <div id="qrcode" ref="qrcode"></div>
        </div>
      </el-dialog>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
import QRCode from 'qrcodejs2'
import Vue from "vue"; // 支付二维码
export default {
  data () {
    return {
      paymentMethod: '',
      totalPrice: 0,
      vipPrice: 0,
      homeworkPrice: 0,
      innerVisible: false,
      codeUrl: '',
      vipList: [],
      homeVipList: [],
      active: "",
      homeworkActive: '',
      vipId: '1',
      orderId: '',
      timers: '',
      flagVip: false,
      flagHomework: false,
    }
  },
  created () {
    // 获取vip会员信息
    this.getVipList()
    this.getTotalPrice()
  },
  methods: {
    getTotalPrice () {
      // this.totalPrice = this.vipPrice + this.homeworkPrice
      this.totalPrice = this.vipPrice
    },
    // 调用一个判断支付是否成功的接口，用这个接口我们监听微信是否支付成功
    getOrderstate () {
      let num = 0
      this.timers = setInterval(() => { //创建一个全局的定时器
        num++
        sendPost(api.getOrderState, { orderId: this.orderId }, 'show').then(res => {
          console.log(res);
          if (res.data.state == 9) { //判断 如果data.state==9 代表支付成功
            this.$router.push({
              path: '/toVip', //成功以后的跳转路径
            })
            this.$msg.success('支付成功！')
            this.innerVisible = false
            clearInterval(this.timers) //别忘记关闭定时器，否则会一直调这个接口
          }
        })
        if (num == 500) { //这里是判断num++到500的情况下用户还没有支付则自动关闭定时器和二维码
          this.innerVisible = false
          clearInterval(this.timers)
        }
      }, 5000)
    },

    // 还有一步是最容易被忽略的 跳转页面的时候也应该关闭定时器
    beforeDestroy () {
      if (this.timers) {
        clearInterval(this.timers); //关闭
      }
    },

    // 会员下单
    submitVipOrder () {
      sendPost(api.submitVipOrder, {
        objId: this.vipId,
        paymentMethod: this.paymentMethod
      }).then(res => {
        // console.log(res);
        // 下订单，获取订单id
        this.orderId = res.data
        if (res.success == 1) {
          Vue.prototype.$msg.error(res.msg);
          this.innerVisible = false
        } else {
          //测试支付成功
          // Vue.prototype.$msg.success("测试支付成功流程");
          this.getWxPayCode()
        }
      })
    },
    // 选择会员类型
    selected (info) {
      this.flag = !this.flag
      if (this.flag) {
        this.active = info.name
        this.vipId = info.id
        this.vipPrice = info.price
        this.getTotalPrice()
      } else {
        this.active = ''
        this.vipId = ''
        this.vipPrice = 0
        this.getTotalPrice()
      }

    },
    // },
    // 获取会员信息
    getVipList () {
      sendPost(api.getVipList, { type: 1 }).then(res => {
        // console.log(res.data);
        this.vipList = res.data
      })
      sendPost(api.getVipList, { type: 2 }).then(res => {
        // console.log(res.data);
        this.homeVipList = res.data
      })

    },
    // 获取微信支付二维码
    getWxPayCode () {
      sendPost(api.getWxPayCode, { orderId: this.orderId }).then(res => {
        // console.log(res.data.code_url);
        this.codeUrl = res.data.code_url
        this.$nextTick(() => {
          this.crateQrcode()
        })
      }
      )
    },
    toPay () {
      var that = this
      console.log(this.paymentMethod);

      // 支付宝支付
      if (this.paymentMethod == '0' && this.totalPrice > 0) {

        // 获取订单id
        sendPost(api.submitVipOrder, {
          objId: this.vipId,
          paymentMethod: '0'
        }).then(res => {
          console.log(res.data);
          // 下订单，获取订单id
          this.orderId = res.data
          window.location.href = 'https://www.go4nines.com/easton_interface/api//payApi/aliOrderParam?orderId=' + res.data
        })

      } else if (this.paymentMethod == '1' && this.totalPrice > 0) {

        // 点击支付按钮，如果有后台返回url，就生成code，否则return
        if (this.codeUrl !== null) {
          // 显示扫码支付弹窗
          this.innerVisible = true
          // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
          // this.$nextTick(() => {
          //   this.crateQrcode()
          // })
          // 向后台发送请求获取订单状态，支付成功的话，就隐藏支付弹框
          this.submitVipOrder()
          this.getOrderstate()
        }
        // console.log('没有url');
        return
      }

      // if(this.paymentMethod == '1' && this.totalPrice > 0){
      //   this.submitVipOrder()
      // }
    },
    // 生成二维码
    crateQrcode () {
      this.qr = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: this.codeUrl // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      })
      // console.log(this.qrcode)
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode () {
      this.$refs.qrcode.innerHTML = ''
      // 关闭弹框的时候清除定时器
      clearInterval(this.timers)
    }
  }
}
</script>

<style lang="less" scoped>
main[data-v-1c477c94] {
  height: 98.75rem;
}
main {
  padding: 0 1.25rem;
  .title {
    height: 5rem;
    line-height: 5rem;
    border-bottom: 1px solid#EDEDED;
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
  }
  .vip-name {
    height: 9.375rem;
    line-height: 9.375rem;
    text-align: center;
    color: #ff5e4e;
    font-size: 2.5rem;
    font-weight: bold;
  }
  .jzz_name {
    color: #13bfbf;
  }
  .homework {
    display: flex;
    padding-left: 1.25rem;
    .selected_color {
      border-color: #13bfbf;
      .h86 {
        color: #13bfbf;
      }
      .h48 {
        color: #06a1a1;
      }
      .tips {
        color: #13bfbf;
      }
    }
    div {
      width: 11.25rem;
      height: 12.5rem;

      background: #fcfcfc;
      border: 2px solid #ededed;
      border-radius: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      text-align: center;
      cursor: pointer;
      margin-right: 2.3125rem;
      .h86 {
        height: 5.375rem;
        line-height: 5.375rem;
        font-size: 1.25rem;
        font-weight: bold;
        color: #333;
        cursor: pointer;
      }
      .h48 {
        height: 3rem;
        line-height: 3rem;
        font-size: 1.25rem;
        color: #13bfbf;
        font-weight: bold;
        .price {
          font-size: 3rem;
          font-weight: bold;
        }
      }
      .tips {
        font-size: 1rem;
        color: #333;
        line-height: 4.0625rem;
        opacity: 0.5;
      }
    }
  }
  .duration {
    display: flex;
    justify-content: space-evenly;
    div {
      width: 11.25rem;
      height: 12.5rem;
      margin: 0 1.09375rem;
      border: 0.125rem solid #ededed;
      border-radius: 0.625rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      text-align: center;
      cursor: pointer;
      .h86 {
        height: 5.375rem;
        line-height: 5.375rem;
        font-size: 1.25rem;
        font-weight: bold;
        color: #333;
        cursor: pointer;
      }
      .h48 {
        height: 3rem;
        line-height: 3rem;
        font-size: 1.25rem;
        color: #ff5e4e;
        font-weight: bold;
        .price {
          font-size: 3rem;
          font-weight: bold;
        }
      }
      .tips {
        font-size: 1rem;
        color: #999999;
        line-height: 4.0625rem;
        opacity: 0.5;
      }
    }
  }
  .pay-methods {
    height: 6.875rem;
    line-height: 6.875rem;
    font-size: 1.25rem;
    color: #333333;
    padding-left: 1.25rem;
  }
  .methods {
    display: flex;
    padding-left: 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
    div {
      width: 18.75rem;
      height: 3.75rem;
      margin-right: 1.875rem;
      border: 0.0625rem solid #f7f7f7;
      border-radius: 0.1875rem;
      text-align: center;
      line-height: 3.75rem;
      font-size: 1.125rem;
      img {
        vertical-align: middle;
      }
    }
  }
}
.privilege {
  display: flex;
  font-size: 1.25rem;
  text-align: center;
  margin-top: 3.75rem;
  color: #333333;
  padding-left: 20px;
  padding-bottom: 1.25rem;
  img {
    width: 51.875rem;
    height: 34rem;
  }
}
.first .prod {
  line-height: 8.9375rem !important;
}
.pay-btn {
  width: 25rem;
  height: 3.75rem;
  line-height: 3.75rem;
  box-sizing: border-box;
  padding: 0;
  background-color: #ff5e4e;
  color: #fff;
  border: 0.0625rem solid #ff5e4e;
  border-radius: 0.1875rem;
  font-size: 1.5rem;
  margin-top: 3.75rem;
  margin-left: 1.25rem;
}
.active_color {
  .h86 {
    color: #ff5e4e !important;
  }
  .tips {
    color: #ffc9c5 !important;
  }
  .h48 {
    color: #c93022 !important;
  }
  border-color: #ff5e4e !important;
  background: #fffafa !important;
}
.selected_method {
  border: 0.0625rem solid #ff5e4e !important;
}
/deep/.el-dialog__header {
  margin-top: 30vh;
}
/deep/.el-dialog__title {
  padding-left: 4.25rem;
}
/deep/.el-dialog__body {
  width: 100%;
  padding: 2.5rem;
  padding-top: 1rem;
  img {
    width: 100%;
  }
}
</style>
